//轮播图
$(function () {
  new Swiper("#banner .b_con", {
    autoplay: 5000,
    speed: 1500,
    grabCursor: true,
    pagination: ".swiper-pagination",
    paginationClickable: true,
    loop: true,
  });
});

//业务范围切换图片
$(function () {
  //获取元素
  let $left = $(".scopeService .content .left");
  let $right = $(".scopeService .content .right");
  let $scopeServiceWall = $(".scopeService .scopeServiceBox .scopeService_wall");
  let $scopeServiceList = $(".scopeService .scopeServiceBox .scopeService_list");
  let $scopeServiceItem = $(".scopeService .scopeServiceBox .scopeService_list .scopeService_item");
  let left = 0;
  $left.click(function () {
    //每次点击都重新获取当前盒子的大小
    let $width = parseInt($scopeServiceItem.eq(0).css("width"));
    left = parseInt(left);
    left += $width + 30;
    if (left >= 0) {
      left = 0;
    }
    $scopeServiceList.css("transform", `translateX(${left}px)`);
  });
  $right.click(function () {
    //每次点击都重新获取当前盒子的大小
    let $width = parseInt($scopeServiceItem.eq(0).css("width"));
    let boxWidth = parseInt($scopeServiceWall.css("width"));

    let margin = 30 * ($scopeServiceItem.length - 1);
    let width = $width * $scopeServiceItem.length;
    let totalWidth = margin + width;
    if (totalWidth - boxWidth < 0) {
      return;
    }
    left -= $width + 30;
    if (left < `-${totalWidth - boxWidth}`) {
      left = `-${totalWidth - boxWidth}`;
    }
    $scopeServiceList.css("transform", `translateX(${left}px)`);
  });
});
//移动端触摸滑动商品图
window.addEventListener("load", function () {
 if (window.innerWidth <= 850) {
   // 1. 获取元素
   var $bigImgList = document.querySelector(
    ".scopeService .scopeServiceBox .scopeService_list"
  );

  // let $item = $(
  //   "#product_detail .productConduit .left .smallBox .smallImg_list .smallImg_item"
  // );
  let $bigImg = $bigImgList.children;
  // var focus = document.querySelector('.focus');
  // var ul = focus.children[0];
  // var ol = focus.children[1];
  // 获得focus的宽度
  var w = $bigImgList.offsetWidth;
  // 2. 利用定时器自动轮播图片
  var index = 0;
  // 等着过渡完成之后，再去判断，监听过渡完成的事件transitionend
 
  // 4. 手指滑动轮播图
  // 触摸元素touchstart：获取手指初始坐标
  var startX = 0;
  var moveX = 0; // 后面会使用这个移动距离，所以要定义为全局变量
  var flag = false; //用来标志手指是否真的移动，还是只是点击
  $bigImgList.addEventListener("touchstart", function (e) {
    startX = e.targetTouches[0].pageX;
    // 手指触摸的时候就停止定时器
    // clearInterval(timer);
  });
  // 移动手指touchmove：计算手指的滑动距离，并且移动盒子
  $bigImgList.addEventListener("touchmove", function (e) {
    // 计算移动距离
    // e.targetTouches[0]为第一个手指，[1]表示第二个手指
    moveX = e.targetTouches[0].pageX - startX;
    // 移动盒子：盒子原来的位置 + 手指移动的距离
    var translateX = -index * w + moveX;
    // 手指拖动的时候，不需要动画效果，所以要取消过渡效果
    $bigImgList.style.transition = "none";
    $bigImgList.style.transform = "translateX(" + translateX + "px)";
    flag = true;
    e.preventDefault(); //组织滚动屏幕的行为
  });
  // 手指离开，根据移动距离去判断是回弹还是播放上一张或者下一张
  $bigImgList.addEventListener("touchend", function (e) {
    // 只有手指移动过了，才执行下面的代码
    if (flag) {
      //（1）如果移动距离大于50像素，则播放上一张或者下一张
      if (Math.abs(moveX) > 70) {
        // 如果是右滑就是播放上一张，moveX是正值
        if (moveX > 0) {
          index--;
          if (index == -1) {
            index = $bigImg.length - 1;
          }
        } else {
          // 如果是左滑就是播放下一张，moveX是负值
          index++;
          if (index >= $bigImg.length) {
            index = 0;
          }
        }
        // 用最新的index乘以宽度
        var translateX = -index * w;
        $bigImgList.style.transition = "all .3s";
        $bigImgList.style.transform = "translateX(" + translateX + "px)";
      } else {
        //（2）如果移动距离小于50像素就回弹
        var translateX = -index * w;
        $bigImgList.style.transition = "all .1s";
        $bigImgList.style.transform = "translateX(" + translateX + "px)";
      }
    }
    // 手指离开的时候就重新开启定时器
    // 注意：开启定时器之前要先清空之前的定时器，保证当前只有一个定时器在执行
    // clearInterval(timer);
    // timer = setInterval(function() {
    //     index++;
    //     var translateX = -index * w;
    //     // 添加动画效果
    //     ul.style.transition = 'all .3s';
    //     ul.style.transform = 'translateX(' + translateX + 'px)';
    // }, 2000);
  });

  // $(document).ready(function () {
  //   $item.bind("mouseenter", function (event) {
  //     var itemIndex = $(this).index();
  //     index = itemIndex;
  //     // 用最新的index乘以宽度
  //     var translateX = -index * w;
  //     $bigImgList.style.transition = "all 1s";
  //     $bigImgList.style.transform = "translateX(" + translateX + "px)";
  //   });
  // });
 }
});
//业务范围
$(function () {
  let dateItem = $("#homePage .scopeService .scopeServiceBox .scopeService_item");
  $(document).ready(function () {
    dateItem.hover(
      function () {
        var index = $(this).index();
        console.log("$(this).index()", $(this).index());
        dateItem.eq(index).find(".wall").slideDown("slow");
      },
      function () {
        var index = $(this).index();
        dateItem.eq(index).find(".wall").stop(true,false).slideUp("slow");
      }
    );
    // dateItem.bind("mouseenter", function (event) {
    //   if (!off) {
    //     var index = $(this).index();
    //     dateItem.eq(index).find(".wall").slideDown("slow");
    //     off = !off;
    //   }
    // });
    // dateItem.bind("mouseleave", function (event) {
    //   if (off) {
    //     var index = $(this).index();
    //     dateItem.eq(index).find(".wall").slideUp("slow");
    //     off = !off;
    //   }
    // });
  });
});
//首页工程案例
$(function () {
  var $enginCaseSemiItem = $("#homePage .enginCase .enginCaseSemi_list .enginCaseSemi_item");
  console.log('$enginCaseSemiItem',$enginCaseSemiItem.eq(0)[0].innerText.length);
  for (let i = 0; i < $enginCaseSemiItem.length; i++) {
    if ($enginCaseSemiItem.eq(i)[0].innerText.length>13) {
      $enginCaseSemiItem.eq(i).css("min-width", "240px");
    }else if ($enginCaseSemiItem.eq(i)[0].innerText.length>10) {
      $enginCaseSemiItem.eq(i).css("min-width", "200px");
    }else if ($enginCaseSemiItem.eq(i)[0].innerText.length>8) {
      $enginCaseSemiItem.eq(i).css("min-width", "170px");
    }else if ($enginCaseSemiItem.eq(i)[0].innerText.length>5) {
      $enginCaseSemiItem.eq(i).css("min-width", "140px");
    }else if ($enginCaseSemiItem.eq(i)[0].innerText.length>4) {
      $enginCaseSemiItem.eq(i).css("min-width", "130px");
    }
    
  }
});

